import { useEffect, useState } from 'react';
import { Spin, Tabs } from 'antd';
import { history } from 'umi';
import Cls from 'classnames';

import pageStyles from '@/common/pageLayout.less';
import '../common/styles.less';
import { taskPushService } from './HomeTable/services';

// 采购需求
import { TableBody } from './HomeTable/mviewTable/TableBody';
import { TableExtraView } from './HomeTable/mviewTable/TableExtraView';

export const ContractHomeView: React.FC<ContractHomesAPI.IPurchaseHomeView> = () => {
  /** 样式根目录 */
  const styleFixCls = 'purchase-homesty';

  const [listData, setListData] = useState([]);

  /**获取全部数据 */
  const { taskPushRun, taskPushLoading, taskPushPagination } = taskPushService((res) => {
    if (res?.msgFlag && res?.rows?.length > 0) {
      const tempMap = res?.rows?.map((item) => {
        return {
          ...item,
          currentStage: item?.nodeName, //当前环节， nodeName为react关键字不能使用！！！
        };
      });
      setListData(tempMap);
    } else {
      setListData([]);
    }
  });

  /** 存入选中的tab标识 */
  const [tabPaneKey, setTabPaneKey] = useState<string>('0');

  /**初始化调用获取数据 */
  useEffect(() => {
    taskPushRun({
      isRemark: Number(tabPaneKey),
      current: 1,
      pageSize: 5,
    });
  }, [tabPaneKey]);

  const reloadListData = (params) => {
    taskPushRun(params);
  };

  /** 返回子组件 */
  const renderTabsPane = () => {
    return <TableBody tabPaneKey={tabPaneKey} listData={listData} isTaskView={false} taskPushPagination={taskPushPagination} reloadListData={reloadListData} />;
  };

  const tabsExtraBtns = () => {
    return <TableExtraView styleFixCls={styleFixCls} tabPaneKey={tabPaneKey} />;
  };

  return (
    <div className={Cls(`${styleFixCls}`, pageStyles['commonTabsLine'])}>
      <Spin spinning={taskPushLoading}>
        <Tabs
          activeKey={tabPaneKey}
          tabBarExtraContent={tabsExtraBtns()}
          items={[
            {
              label: '待办',
              key: '0',
              children: renderTabsPane(),
            },
            {
              label: '已办',
              key: '2',
              children: renderTabsPane(),
            },
          ]}
          onChange={(activeKey: string) => {
            setTabPaneKey(activeKey);
          }}
        />
      </Spin>
    </div>
  );
};
